<template>
	<view class="content">
		<!-- 头部大分类 -->
		<scroll-view id="tab-bar" :scroll-x="true" :show-scrollbar="false" class="scroll-h">
			<view v-for="(tab,index) in tagList" :id="tab.id" :key="tab.id" :data-current="index" class="uni-tab-item"
				@click="ontabtap">
				<text :class="tabIndex === index ? 'uni-tab-item-title-active' : ''"
					class="uni-tab-item-title">{{tab.name}}</text>
			</view>
		</scroll-view>
		<!-- 大分类下小分类以及标签 -->
		<uni-row class="demo-uni-row" style="height: 50%;" width="730">
			<uni-col :span="5">
				<!-- 小分类 -->
				<scroll-view id="tab-bar" :scroll-y="true" :show-scrollbar="false" class="scroll-h"
					style="display: inline-block;vertical-align:top;">
					<view v-for="(tab,index) in currMiniClass" :id="tab.id" :key="tab.id" :data-current="index"
						class="miniclass-item" @click="onMiniClassTab">
						<text :class="miniClassTabIndex === index ? 'miniclass-title-active' : ''"
							class="'miniclass-title">{{tab.name}}</text>
					</view>
				</scroll-view>
			</uni-col>
			<uni-col :span="18">
				<!-- 标签 -->
				<scroll-view :scroll-into-view="scrollTop" :scroll-y="true" :show-scrollbar="false" class="all-tag-content"
					style="font-size: 12rpx;">
					<view v-for="(item,index) in currMiniClass" :id="'sub-id-'+index" :key="index"
						style="margin-top: 10px;">
						<view style="color: #c6c6c6;">
							{{ item.name}}
						</view>
						<view style="margin-top: 10px;">
							<view v-for="(tag,index) in item.subTags" :key="index" class="mini-btn tag" size="mini">
								{{ tag.name }}
							</view>
						</view>
					</view>
				</scroll-view>
			</uni-col>
		</uni-row>
	</view>
</template>

<script>
	import * as request from '@/api/request';

	export default {
		data() {
			return {
				tabIndex: 0,
				// 顶部菜单栏
				topClasses: [{
					id: 1,
					name: "男生"
				}, {
					id: 1,
					name: "女生"
				}, {
					id: 1,
					name: "听书"
				}, {
					id: 1,
					name: "出版"
				}, {
					id: 1,
					name: "短剧"
				}, {
					id: 1,
					name: "漫画"
				}],
				// 菜单下的小分类及标签
				topClass: {
					id: 1,
					name: "男生",
					subClass: [{
						id: 100,
						name: "分类",
						subTag: [{
							id: 101,
							name: "都市"
						}, {
							id: 102,
							name: "玄幻"
						}, {
							id: 103,
							name: "历史"
						}, {
							id: 104,
							name: "种田"
						}, {
							id: 105,
							name: "奇幻仙侠"
						}, {
							id: 106,
							name: "科幻末世"
						}, {
							id: 107,
							name: "同人"
						}, {
							id: 108,
							name: "游戏体育"
						}]
					}, {
						id: 200,
						name: "热门标签",
						subTag: [{
							id: 201,
							name: "都市"
						}, {
							id: 202,
							name: "搞笑轻松"
						}, {
							id: 203,
							name: "系统"
						}, {
							id: 204,
							name: "重生"
						}, {
							id: 205,
							name: "悬疑灵异"
						}, {
							id: 206,
							name: "玄幻"
						}, {
							id: 207,
							name: "穿越"
						}]
					}, {
						id: 300,
						name: "主题",
						subTag: [{
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}]
					}, {
						id: 400,
						name: "主题1",
						subTag: [{
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}]
					}, {
						id: 500,
						name: "主题2",
						subTag: [{
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}, {
							id: 301,
							name: "高武世界"
						}]
					}]
				},
				tagList: [],
				currMiniClass: [],
				currTags: [],
				miniClassTabIndex: 0,
				scrollTop: "sub-class-0"
			}
		},
		created() {
			this.treeTag();
		},
		mounted() {

			setTimeout(() => {
				if (this.tagList.length <= 0) {
					// uni.showToast({
					// 	title: "数据未加载",
					// 	icon:'error'
					// })
				} else {
					this.currMiniClass = this.tagList[this.tabIndex].subTags;
					this.currTags = this.currMiniClass[this.miniClassTabIndex].subTags;
				}

			}, 2000)
		},
		methods: {
			treeTag() {
				// 标签分类树化
				request.get("/business/tag/tree", {}, )
					.then((res) => {
						this.tagList = res.data
						console.log(res)
					}, (err) => {
						console.error(err)
						uni.showToast({
							title: "数据加载失败",
							icon: 'error'
						})
					})
			},
			// 获取小分类事件
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.tabIndex = index
				this.currMiniClass = this.tagList[this.tabIndex].subTags
			},
			// 获取标签事件
			onMiniClassTab(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.miniClassTabIndex = index
				// 跳转到指定位置
				this.scrollTop = 'sub-id-' + index;
				this.currTags = this.currMiniClass[this.miniClassTabIndex].subTags;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 10px;
		height: 97vh;
		background-color: #f6f6f6;

		.scroll-h {
			white-space: nowrap;
			width: 100%;

			.uni-tab-item {
				width: 90rpx;
				height: 40rpx;
				display: inline-flex;
				margin-left: 20rpx;
				margin-bottom: 50rpx;
			}
		}

		.uni-tab-item-title {
			color: #555;
			font-size: 30rpx;
			font-weight: 1000;
			height: 80rpx;
			line-height: 80rpx;
			flex-wrap: nowrap;
			/* #ifndef APP-PLUS */
			white-space: nowrap;
			/* #endif */
		}

		.uni-tab-item-title-active {
			color: #010000;
			font-size: 40rpx;
			font-weight: 700;
		}

		/* miniClass */
		.miniclass-item {
			/* #ifndef APP-PLUS */
			/* display: inline-block; */
			/* #endif */
			font-size: 24rpx;
			flex-wrap: nowrap;
			margin-top: 15px;
			padding-left: 0rpx;
			padding-right: 0rpx;
			text-align: center;
		}

		.miniclass-title {
			color: #555;
			font-size: 24rpx;
			height: 80rpx;
			line-height: 80rpx;
			flex-wrap: nowrap;
			/* #ifndef APP-PLUS */
			white-space: nowrap;
			/* #endif */
		}

		.miniclass-title-active {
			color: #f76425;
			font-size: 24rpx;
			font-weight: 700
		}


		/* tag  content */
		.all-tag-content {
			display: inline-block;
			padding: 15rpx;
			width: 100%;
			height: 90vh;
			background-color: #fff;
			border-radius: 20rpx;
		}

		.tag {
			display: inline-block;
			margin: 5rpx;
			padding: 5px 0px;
			text-align: center;
			width: 150rpx;
			background-color: #f7f7f7;
			border-radius: 10rpx;
		}
	}
</style>